<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>ECharts-基本线性图及其配置要求</title>  
    <!-- ECharts单文件引入 -->
<script src="js/echarts.js"></script> 
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="box" style="height:400px;width: 800px;padding: 20px"></div>
    </div>  
    <script>
    // 获取到这个DOM节点，然后初始化
    var myChart = echarts.init(document.getElementById("box"));
    var data = [
    {"value": 26, "name": "股票"}, {"value": 16.7, "name": "理财"}, {
        "value": 12.4,
        "name": "资金"
    }, {"value": 12.2, "name": "期贷"}, {"value": 8.4, "name": "期权"}, {
        "value": 7.6,
        "name": "外汇"
    }, {"value": 5.9, "name": "贵金属"}, {"value": 3.6, "name": "贵金属"}
];
data_name = [];
for (var n  in data){
    data[n]['name'] = data[n]['name'] + ' '+data[n]['value'] +'%';
    data_name.push(data[n]['name'])
}

option = {
    backgroundColor: "#000",
    title: {
      show:false,
        text: '“一带一路”沿线省区市活动参与',
        subtext:'纯属虚构',
        left: '50%',
        textAlign: 'center',
        textStyle: {
            color: "#fff",
            fontWeight:'normal',
            fontFamily:'宋体'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: "{b}"
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        right: 60,
        data:data_name,
        textStyle: {
            color: "#fff",
            fontWeight:'normal',
            fontFamily:'宋体'
        }
    },
    series: [

        {
            name:'',
            type:'pie',
            radius: ['40%', '55%'],
            data:[
                  {"value": 26, "name": "股票"}, {"value": 16.7, "name": "理财"}, {
                      "value": 12.4,
                      "name": "资金"
                  }, {"value": 12.2, "name": "期贷"}, {"value": 8.4, "name": "期权"}, {
                      "value": 7.6,
                      "name": "外汇"
                  }, {"value": 5.9, "name": "贵金属"}, {"value": 3.6, "name": "贵金属"}
              ],
            labelLine: {
                normal: {
                    show: false
                }
            },
            label: {
              normal: {
                  // position: 'inner',
                  // formatter: '{d}%',
                  show:false,
                  textStyle: {
                      color: '#fff',
                      fontWeight: 'bold',
                      fontSize: 14
                  }
              }
        },
        }
    ]
};


    myChart.setOption(option);
</script>
</body>  
</html>  